﻿<UserControl x:Class="yavc.Phone.Controls.BrowseListControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:conv="clr-namespace:yavc.Phone.Lib.Util;assembly=yavc.Phone.Lib"
    xmlns:con="clr-namespace:yavc.Phone.Controls;assembly=yavc.Phone"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="480" d:DesignWidth="480">
    <UserControl.Resources>
        <conv:VisibilityBooleanConverter x:Key="visConv" 
                                             TrueVisibility="Visible" 
                                             FalseVisibility="Collapsed" 
                                             DefaultVisibility="Collapsed" />
        <DataTemplate x:Key="dtItem">
            <Button Margin="0,0,0,17" Padding="5" BorderThickness="0" Click="btnSelect_Click" Tag="{Binding}" HorizontalContentAlignment="Left">
                <TextBlock Text="{Binding Text}" 
                           Foreground="{StaticResource PhoneForegroundBrush}"
                           Style="{StaticResource yavcPhoneTextLargeStyle}"/>
            </Button>
        </DataTemplate>
        <DataTemplate x:Key="dtGroupHeader">
            <Border Background="{StaticResource PhoneAccentBrush}" Width="64" Height="64" Margin="12" HorizontalAlignment="Left">
                <TextBlock Text="{Binding Key}" VerticalAlignment="Center" HorizontalAlignment="Center"
                           FontSize="{StaticResource PhoneFontSizeExtraLarge}"
                           Foreground="{StaticResource PhoneForegroundBrush}" />
            </Border>
        </DataTemplate>
        <DataTemplate x:Key="dtGroupItem">
            <Border Background="{StaticResource PhoneAccentBrush}" Width="120" Height="120" Margin="12" HorizontalAlignment="Left">
                <TextBlock Text="{Binding Key}" VerticalAlignment="Center" HorizontalAlignment="Center"
                           FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}"
                           FontWeight="Bold"
                           Foreground="{StaticResource PhoneForegroundBrush}" />
                <Border.Projection>
                    <PlaneProjection RotationX="-60"/>
                </Border.Projection>
            </Border>
        </DataTemplate>
    </UserControl.Resources>
    <Grid>
        <toolkit:LongListSelector x:Name="selector"
                                  ItemsSource="{Binding GroupItems}"
                                  ItemTemplate="{StaticResource dtItem}"
                                  GroupItemTemplate="{StaticResource dtGroupItem}"
                                  GroupHeaderTemplate="{StaticResource dtGroupHeader}"
                                  GroupViewClosing="LongListSelector_GroupViewClosing"
                                  GroupViewOpened="LongListSelector_GroupViewOpened"
                                  Background="Transparent">
            <toolkit:LongListSelector.GroupItemsPanel>
                <ItemsPanelTemplate>
                    <toolkit:WrapPanel Margin="12,42" />
                </ItemsPanelTemplate>
            </toolkit:LongListSelector.GroupItemsPanel>
        </toolkit:LongListSelector>


        <Grid Visibility="{Binding IsRefreshing, Converter={StaticResource visConv}}">
            <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                   Fill="{StaticResource PhoneBackgroundBrush}" />

            <TextBlock Text="Loading . . ." HorizontalAlignment="Center" VerticalAlignment="Center"
                   Style="{StaticResource PhoneTextLargeStyle}" />

            <ProgressBar Value="{Binding PercentageComplete}" Minimum="0" Maximum="1"  
                     HorizontalAlignment="Stretch" VerticalAlignment="Top" IsIndeterminate="{Binding IsIndeterminate}" />
        </Grid>
    </Grid>
</UserControl>
